<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入element-ui样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			/* 			.el-table .warning-row {
				background: oldlace;
			}

			.el-table .success-row {
				background: #f0f9eb;
			} */
		</style>
	</head>
	<body>
		<div id="prescription">
			<h2>处方</h2>
			<el-row>
				<el-col :span="6">
					<el-form ref="form" label-width="80px">
						<el-form-item label="身份证件">
							<el-input v-model="patinForm.patientIdCard" @blur="findUserInfo" placeholder="请输入身份证" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="姓名">
							<el-input v-model="patinForm.patientName" :disabled="true" style="width: 150px;"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-input v-model="patinForm.patientSex" :disabled="true" style="width: 150px;"></el-input>
						</el-form-item>
						<el-form-item label="年龄">
							<el-input v-model="patinForm.patientAge" :disabled="true" style="width: 150px;"></el-input>
						</el-form-item>
						<el-form-item label="临床诊断">
							<el-input v-model="patinForm.clinicalDiagnosis" style="width: 150px;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="10">
					<el-form ref="form" label-width="80px">
						<el-form-item label="药名">
							<el-autocomplete class="inline-input mediaInput" style="width: 300px;" v-model="medicineForm.productName"
							 :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" :trigger-on-focus="false"></el-autocomplete>
						</el-form-item>
						<el-form-item label="数量">
							<el-input v-model="medicineForm.productNumber" type="number" style="width: 150px;"></el-input>
						</el-form-item>
						<el-form-item label="服用方式">
							<el-input v-model="medicineForm.productUse" required="true" style="width: 150px;"></el-input>
						</el-form-item>
						<el-form-item label="使用频率">
							<el-input v-model="medicineForm.productFrequency" required="true" style="width: 150px;"></el-input>
						</el-form-item>
						<el-button type="primary" @click="addPrescription">新增处方</el-button>
						<el-button type="success" @click="insertPrescription">确认提交</el-button>
					</el-form>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<!-- 处方具体详情表格 -->
					<template>
						<el-table stripe :data="prescriptionData" style="width: 100%" :row-class-name="tableRowClassName">
							<el-table-column prop="productName" label="药名" width="140"></el-table-column>
							<el-table-column prop="productFormat" label="规格" width="120"></el-table-column>
							<el-table-column prop="productRetailPrice" label="单价" width="120"></el-table-column>
							<el-table-column prop="productNumber" label="数量" width="120"></el-table-column>
							<el-table-column prop="productForm" label="剂型" width="120"></el-table-column>
							<el-table-column prop="productUse" label="服用方式" width="180"></el-table-column>
							<el-table-column prop="productFrequency" label="使用频率" width="250"></el-table-column>
							<el-table-column prop="productTotal" label="单行累计" width="120"></el-table-column>
						</el-table>
					</template>
					
					
					<el-form ref="form"  label-width="80px">
						<el-form-item id="tol" label="当前总价">
							{{medicineForm.productAllTol}}
						</el-form-item>
					</el-form>
					
				</el-col>
			</el-row>
		</div>


		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<script>
			var app = new Vue({
				el: "#prescription",
				data: {
					addForm: {
						jx: "",
					},
					prescriptionData: [],
					patinForm: {
						patientIdCard: "",
						patientName: "",
						patientPhoneNumber: "",
						patientAddress: "",
						patientSex: "",
						patientAge: "",
						clinicalDiagnosis:"",//临床诊断
					},
					medicineForm: {
						productName: "",
						productNumber: "",
						productUse: "",
						productFrequency: "",
						productTotal: "",
						productId:"",//药品ID
						patientId:"",//患者ID
						productAllTol:"0.0",//所有处方的总计
					}
				},
				methods: {
					tableRowClassName({
						row,
						rowIndex
					}) {
						if (rowIndex === 1) {
							return 'warning-row';
						} else if (rowIndex === 3) {
							return 'success-row';
						}
						return '';
					},
					// 根据身份证查询患者基本信息
					findUserInfo: function() {
						var t = this;
						axios.get('http://192.168.80.13:8080/medical/patient/selectPatientByIdCard', {
							params: {
								idCard: t.patinForm.patientIdCard
							}
						}).then(function(data) {
							if (data.data.success) {
								var d = data.data.data;
								var tp = t.patinForm
								var tc = t.caseForm
								//判断返回的结果
								if (data.data.data == null) {
									alert("请输入正确的身份证件")
									return;
								}
								// 给patinForm表单中的数据赋值
								tp.patientName = d.patientName;
								tp.patientSex = d.patientSex;
								tp.patientAge = d.patientAge;
								tp.patientPhoneNumber = d.patientPhoneNumber;
								tp.patientAddress = d.patientAddress;
								
								t.medicineForm.patientId = t.patinForm.patientIdCard
							}
						}).catch(function(Error) {
							console.log(Error)
						})

					},
					//机型搜索(模糊搜索)
					querySearch(queryString, cb) {
						if (queryString != '') {
							this.getPlanTypeData(queryString, (data) => {
								let results = '';
								if (queryString && !data[0].noId) { //输入框有值且有匹配数据时
									results = data.filter(this.createFilter(queryString))
								} else { //没有匹配数据时显示自定义的字段
									results = data
								}
								cb(results);
							});
						}
					},
					createFilter(queryString) {
						return (restaurant) => {
							// return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase())> -1);
							//后台已做筛选,不需再过滤
							return (restaurant.value)
						};
					},
					//获取机型数据
					getPlanTypeData(val, fun) {
						let dataArr = [];
						let para = {
							icaocode: val,
						};

						var t = this;
						axios.get('http://192.168.80.13:8080/medical/medicine/selectMedicineLikeName', {
							params: {
								MedicineName: val
							}
						}).then(function(data) {
							if (data.data.success) {
								console.log(data.data)
								// 判断得到的数组长度
								let d = data.data.data
								console.log("d的长度---------" + d.length)
								if (d.length > 0) {
									d.forEach((item, index) => {
										dataArr.push({
											value: item.productName + " | " + item.productFormat,
											name: item.cnfullname
										})
									});
								} else {
									dataArr.push({
										value: '无搜索结果',
										noId: '无搜索结果',
									})
								}
								fun(dataArr);

							}
						}).catch(function(Error) {
							console.log(Error)
						})

					},
					//搜索选中
					handleSelect(item) {
						if (item.name) {
							this.$set(this.addForm, 'jxdescribe', item.name);
						}
					},
					// 添加一条新的处方
					addPrescription: function() {
						var t = this;
						let product = this.medicineForm.productName;
						if (product != "") {
							console.log("进来了")
							if (t.medicineForm.productNumber == "") {
								alert("数量不能为空")
								return;
							}
							if (t.medicineForm.productUse == "") {
								alert("服用方式不能为空")
								return;
							}
							if (t.medicineForm.productFrequency == "") {
								alert("使用方式不能为空")
								return;
							}

						}
						let p = product.split(" | ");
						let productName = p[0]
						let productFormat = p[1]
						//根据名字和规格去查询对应的药品 并获取单价
						axios.get('http://192.168.80.13:8080/medical/medicine/selectMedicineLikeNameAndProductFormat', {
							params: {
								MedicineName: productName,
								ProductFormat: productFormat
							}
						}).then(function(data) {
							if (data.data.success) {
								console.log(data.data)
								let da = data.data.data;
								let medicineId = da.medicineId;
								let patientId = t.medicineForm.patientId;
								let productRetailPrice = da.productRetailPrice;
								let productNumber = t.medicineForm.productNumber;
								let productTotal = productRetailPrice * productNumber;
								t.medicineForm.productAllTol = t.medicineForm.productAllTol - (-productTotal);
								let productForm = da.productForm;
								let productUse = t.medicineForm.productUse;
								let productFrequency = t.medicineForm.productFrequency;
								let clinicalDiagnosis = t.patinForm.clinicalDiagnosis
								let prescription = {
									productName: productName,
									productFormat: productFormat,
									productRetailPrice: productRetailPrice,
									productNumber: productNumber,
									productForm: productForm,
									productUse: productUse,
									productFrequency: productFrequency,
									productTotal: productTotal,
									patientId:patientId,
									medicineId:medicineId,
									clinicalDiagnosis:clinicalDiagnosis,
								};
								t.prescriptionData.push(prescription);

								t.medicineForm.productName = "";
								t.medicineForm.productNumber = "";
								t.medicineForm.productUse = "";
								t.medicineForm.productFrequency = "";
							}
						}).catch(function(Error) {
							console.log(Error)
						})
					},
					// 将整条处方新增
					insertPrescription:function(){
						var t = this;
						if(t.patinForm.patientIdCard==""){
							alert("请输入身份证件！！！！！")
							return;
						}
						if(t.prescriptionData.length==0){
							alert("请新增一张处方哦！！！！！")
							return;
						}
						axios.post('http://192.168.80.13:8080/medical/prescription-info/insertPrescription', t.prescriptionData)
						.then(function(data) {
							if(data.data.success){
								alert("更新成功！")
								//将所有数据清空
								t.prescriptionData = [];
								
								t.patinForm.patientIdCard="";
								t.patinForm.patientName="";
								t.patinForm.patientSex="";
								t.patinForm.patientAge="";
								t.patinForm.clinicalDiagnosis="";
								
								t.medicineForm.productAllTol="0.0";
								
								
							}
						}).catch(function(Error) {
							console.log(Error)
						})
					}
				},

			})
		</script>


	</body>
</html>
